<template>
  <div class="meituan-refund-search">
    <c-title text="">
      <div class="search-address" slot="left" @click="toCityPage">
        <span>{{city_name}}</span>
        <van-icon name="arrow-down" size="0.8125rem" />
      </div>
    </c-title>
    <van-sticky>
      <div class="search-box">
        <div class="search">
          <div class="search-input">
            <i class="iconfont icon-sousuo1"></i>
            <input v-model="keywords" type="text" placeholder="请输入关键词搜索" />
            <button class="search-button" @click="search">搜索</button>
          </div>
        </div>
      </div>
    </van-sticky>
    <div class="box" v-for="(item, i) in list" :key="i" @click="detail_handle(item)">
      <div class="box-left">
        <div class="box-left-img">
          <img :src="item.dealBaseInfo.defaultPic" alt="" />
        </div>
        <div class="distance">距离：{{ item.shopInfo.distanceToShow }}</div>
        <div class="make-money" v-if="item.dealBaseInfo.share_reward.amount!=='0.00'" >
          <span class="profit">赚</span>
          <span class="price">{{ $i18n.t('money') }}{{ item.dealBaseInfo.share_reward.amount }}</span>
        </div>
      </div>
      <div class="box-right">
        <div class="title">{{ item.dealBaseInfo.dealTitle }}</div>
        <div class="tips">{{ item.shopInfo.brandName }}</div>
        <div class="illustrate" :class="{ 'space-around': item.dealBaseInfo.couponPrice > 0 }">
          <div>
            <div>美团价</div>
            <div>{{ $i18n.t('money') }}{{ item.dealBaseInfo.realPrice }}</div>
          </div>
          <div v-if="item.dealBaseInfo.couponPrice > 0">
            <div>其他立减</div>
            <div class="fz-24">{{ $i18n.t('money') }}{{ item.dealBaseInfo.couponPrice.toFixed(2) }}</div>
          </div>
        </div>
        <div class="preferential">
          <span style="margin-right: 0.1563rem;">券后价</span>
          <span>{{ $i18n.t('money') }}</span>
          <div style="display: flex;align-items: center;">
            <span style="font-size: 1.125rem;font-weight: bold;line-height: 1;">{{ item.dealBaseInfo.finalPrice }}</span>
            <span class="discount" v-if="item.dealBaseInfo.discount">{{ item.dealBaseInfo.discount }}</span>
          </div>
        </div>
        <div class="preferential-2">
          <span>门市价</span>
          <span style="text-decoration: line-through;">{{ $i18n.t('money') }}{{ item.dealBaseInfo.marketPrice }}</span>
        </div>
      </div>
    </div>
    <van-empty v-if="list && list.length == 0" description="暂无数据" />
  </div>
</template>

<script>
import { scrollMixin } from "../../utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      list: [],
      current_page: 1,
      last_page: 1,
      isLoadMore: true,

      keywords: "",
      params_data: {},
      point: {
        lat: "",
        lng: ""
      },
      city_name: "请选择",
      second_cate_id: "",
      cate_id: "",
      city_id: "",

    };
  },
  activated() {
    this.init();
    if(this.$route.query.path&&this.$route.query.path=='home'){
      console.log("首页")
      this.getData();
    }else{//地址选择页进入
      this.getCategory(this.city_id);
    }
  },
  methods: {
    init() {
      this.city_name = '请选择';
      let query = this.$route.query;
      this.isLoadMore = true;
      let city_id = localStorage.getItem('meituan_city_id');
      let myLoaction = JSON.parse(localStorage.getItem('myLocation'));
      let meituanCategory = JSON.parse(localStorage.getItem('meituanCategory'));
      this.city_id = city_id;
      if (query.k) {
        this.keywords = query.k;
      }
      this.cate_id = meituanCategory.cate_id;
      this.second_cate_id = meituanCategory.sId;
      if (query.city) {
        this.city_name = query.city;
      }
      if (query.lng&&query.lat) {
        this.point.lng = query.lng;
        this.point.lat = query.lat;
      }else if(myLoaction){
        this.point = myLoaction.point;
      }
    },
    toCityPage() {
      this.$router.push(this.fun.getUrl("citypickerPage", {}, { plu: "meituan", path: 'search' }))
    },
    detail_handle(item) {
      this.$router.push(this.fun.getUrl('meituan_refund_detail', {}, { dealid: item.dealBaseInfo.dealGroupId, cate_id: this.cate_id,  lng: this.point.lng, lat: this.point.lat }));
    },
    search() {
      this.getData();
    },
    async getData(page = 1) {
      let json = {
        first_cate_id: this.cate_id,
        page,
        geo_info: {
          lat: "",
          lng: "",
          cityId: ""
        },
        keyword: "",
      };
      if (this.city_id) {
        json.geo_info.cityId = this.city_id;
      }
      if (this.second_cate_id>0) {
        json.second_cate_id = this.second_cate_id;
      }
      if (this.keywords) {
        json.keyword = this.keywords;
      }
      if (this.point) {
        json.geo_info.lat = this.point.lat;
        json.geo_info.lng = this.point.lng;
      }
      let { result, msg, data } = await $http.post("plugin.meituan-group-buy.frontend.good.good", json, '');
      if (result == 0) {
        return this.$toast(msg);
      }
      this.isLoadMore = true;
      if (data.current_page == 1) {
        this.list = data.records || [];
      } else if (data.current_page > 1) {
        this.list = this.list.concat(data.records);
      }
      this.current_page = data.current_page;
      this.last_page = data.last_page;
    },
    getMoreData() {
      if (this.current_page >= this.last_page) {
        return;
      }
      this.isLoadMore = false;
      let page = this.current_page + 1;
      this.getData(page);
    },
    async getCategory(city_id) {
      console.log("请求商品分类数===========")
      let { data, msg, result } = await $http.get("plugin.meituan-group-buy.frontend.good.category", { city_id }, '');
      if (result == 0) {
        return this.$toast(msg)
      }
      this.cate_id = data[0].id
      this.getChildrenCategory(data[0].id);
    },
    getChildrenCategory(first_cate_id) {
      $http.get("plugin.meituan-group-buy.frontend.good.category", { first_cate_id, city_id: this.city_id }, '').then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        this.second_cate_id = res.data[0].id;
        this.getData();
      })
    },

  }
};
</script>

<style scoped lang="scss">
::v-deep .van-nav-bar {
  background-color: var(--themeBaseColor) !important;
}

::v-deep .van-nav-bar {
  border-bottom: none;
}

::v-deep .van-button--default {
  background-color: var(--themeBaseColor) !important;
  color: #fff;
}

::v-deep .van-nav-bar .van-icon {
  color: #fff;
}

.van-icon-arrow-down {
  display: flex;
  align-items: center;
  margin-left: 0.1563rem;
}

.box {
  background-color: #fff;
  border-radius: 0.5rem;
  margin: 0.5rem 0.75rem;
  padding: 0.75rem;
  display: flex;

  .space-around {
    position: relative;
    justify-content: space-around !important;
  }

  .space-around::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.625rem;
    height: 0.0938rem;
    border-radius: 0.125rem;
    background: #F15353;
  }

  .illustrate {
    position: relative;
    height: 2.75rem;
    background: #FFF5F5;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.6875rem;
    color: #F15353;
  }

  .illustrate::after {
    position: absolute;
    content: "";
    bottom: -0.3rem;
    left: 0.6563rem;
    background: #FFF5F5;
    width: 1.375rem;
    height: 1.375rem;
    transform: rotate(45deg);
  }

  .preferential-2 {
    margin-top: 0.3438rem;
    display: flex;
    color: #AAAAB3;
    font-size: 11px;
    align-items: baseline;

  }

  .preferential {
    margin-top: 0.9375rem;
    display: flex;
    color: #F15353;
    font-size: 0.75rem;
    align-items: baseline;
  }

  .discount {
    height: 1.0313rem;
    line-height: 1.0313rem;
    padding: 0 0.2188rem;
    box-sizing: border-box;
    border-radius: 0.1875rem;
    border: 1px solid #F15353;
    font-size: 0.625rem;
    margin-left: 0.25rem;
  }

  .box-right {
    margin-left: 0.375rem;
    flex:1;

    .title {
      text-align: left;
      margin-top: 0.375rem;
      font-size: 0.9375rem;
      font-weight: bold;
      color: #00001C;
    }

    .tips {
      font-size: 0.75rem;
      font-weight: 400;
      color: #6E6E79;
      margin: 0.75rem 0;
      text-align: left;
    }
  }

  .distance {
    color: #6E6E79;
    font-size: 0.75rem;
    margin-top: 0.8438rem;
    margin-bottom: 0.625rem;
    text-align: left;
  }

  .box-left {
    flex-shrink: 0;
  }

  .box-left-img {
    width: 6.25rem;
    height: auto;
  }

  img {
    width: 100%;
    height: 100%;
    border-radius: 0.625rem;
  }

  .make-money {
    max-width: 4.9375rem;
    height: 1.5rem;
    line-height: 1.5rem;
    border-radius: 0.25rem;
    display: flex;
    justify-content: space-between;
    color: #ff7b05;
    border: 1px solid #ff7b05;

    .profit {
      position: relative;
      font-size: 0.75rem;
      padding: 0 0.375rem;
      border-right: 1px dotted #F96D20;
    }

    .price {
      flex: 1;
      text-align: center;
      font-size: 0.8125rem;
      font-weight: bold;
      color: #F96D20;
    }
  }
}

.meituan-refund-search {

  .search-box {
    background: var(--themeBaseColor);
  }

  .search {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.75rem;
  }

  .search-input {
    flex: 1;
    display: flex;
    align-items: center;
    height: 2.25rem;
    background: #FFFFFF;
    border-radius: 1.25rem;
    padding: 0.1875rem 0.25rem 0.1875rem 1.0938rem;

    .icon-sousuo1 {
      font-size: 0.875rem;
      margin-right: 0.2188rem;
      color: #999999;
    }

    input {
      flex: 1;
      border: none;
      border-radius: 100px;
      padding-left: 0.1563rem;
    }
  }

  .search-button {
    width: 3.25rem;
    height: 1.875rem;
    background: var(--themeBaseColor);
    border-radius: 1.25rem;
    border: none;
    color: #fff;
  }

  .search-address {
    display: flex;
    align-self: center;
    color: #fff;
    font-size: 0.9375rem;
    margin-left: 0.6875rem;
  }
}
</style>
